
<template>
  <div style="width: 600px;height: 400px;" id="bbb">
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref, reactive, watch, onUnmounted } from 'vue'
import * as echarts from 'echarts';

let myChart = ref()
// onUnmounted(() => {
// })
onMounted(() => {
  console.log(myChart.value);
  
  console.log(echarts.init(document.getElementById("bbb")).getModel());
  let a=new Array(100).fill(10)
  let aP=new Proxy(a,{
    get(target, key, reveiver){
      console.log(key);
      return 5
    }
  })

  let b=reactive([1,5,2])
  b.splice(1,1)
  // console.log(b);
  // console.log();
  // echarts.init(document.getElementById("bbb")).dispose()
  // console.log(echarts.init(document.getElementById("bbb")).getModel());
  nextTick(() => {
    console.log(111);
    let chartDom = document.getElementById("bbb")
    myChart.value = echarts.init(chartDom);
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    };
    myChart.value.setOption(option);
    // setInterval(() => {
    //   console.log(myChart);
    // }, 1000)
  })


})
</script>


<style lang='less'>
#bbb {
  transition: all 2s ease;
}
</style>